<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" style="width: 100%" row-key="id" border>
      <el-table-column prop="account" label="账号"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column label="操作" width="600" align="center">
        <template slot-scope="{ row }">
          <el-button @click="toAccountPlat(row)" type="primary">三方账户</el-button>
          <el-button @click="toOrdersNow(row)" type="primary">当前委托</el-button>
          <el-button @click="toOrdersHistory(row)" type="primary">历史委托</el-button>
          <el-button @click="toBalanceNow(row)" type="primary">当前持仓</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="配置三方账户" :visible.sync="outerVisible">
      <PlatformAccount :userId="userId" :key="userId"></PlatformAccount>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {GetSystemUserList} from "@/api/SystemManagerApi";

  import PlatformAccount from './components/PlatformAccount'

  export default {
    components: {PlatformAccount},
    data() {
      return {
        userId: "",
        listLoading: false,
        list: [],
        outerVisible: false,
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true;
        GetSystemUserList().then(response => {
          this.list = response.data;
          this.listLoading = false;
        });
      },
      toAccountPlat(row) {
        this.outerVisible = true
        this.userId = row.id
      },
      toOrdersNow(row) {
        this.$router.push({path: 'OrdersNow', query: {userId: row.id}})
      },
      toOrdersHistory(row) {
        this.$router.push({path: 'OrdersHistory', query: {userId: row.id}})
      },
      toBalanceNow(row) {
        this.$router.push({path: 'BalanceNow', query: {userId: row.id}})
      },
    }
  };
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
